<template>
<div class="box">
	<Row v-for="(val,index) in bumens" :key="index" style="margin-bottom:10px;">
		<Col span="22">
			<!--Select v-model="bumens[index]" style="width:100%;">
				<Option value="">请选择</Option>
				<Option v-for="item in list" :value="item[field]" :key="item.id">{{ item.name }}</Option>
			</Select-->
			<Cascader v-model="bumens[index].value" :data="list" filterable></Cascader>
		</Col>
		<Col span="2" v-if="index!=0">
			<a @click="del(index)"><Icon type="ios-close-circle-outline" size="28" /></a>
		</Col>
	</Row>
	<div class="act_box">
		<a @click="add" title="添加一个"><Icon type="ios-add-circle-outline" size="28" /></a>
	</div>
</div>
</template>
<script>
export default {
	data:function(){
		return{
			bumens:[],
			list:[],
			sy_num:100,
			bumenArr:[],
		};
	},
	props:{
		value:{
			default:''
		},
		field:{
			default:'id'
		}
	},
	created:function(){
		// this.init();
		this.load_data();
		this.add();
	},
	watch:{
		value(val){
			setTimeout(()=>{
				this.init();
			},200)
					// this.$forceUpdate();
		},
		bumens:{
			handler(val,oldVal){

				var childrenVal = JSON.parse(JSON.stringify(this.bumens));
				childrenVal.forEach(item=>{
					if (item.value.length>1) {
						item.value.shift();
					}
				})
				
				this.$emit('change',childrenVal);
			},
			deep:true
		}
	},
	methods:{
		init(){
			var arr = [];
			var value_fg = this.value.split(',');
			
			for(var i=0;i<value_fg.length;i++){
				arr.push({value:value_fg[i]});
			}
			this.bumens = arr;
			this.bumens.forEach(item=>{
					if (typeof item.value == 'string') {
						item.value = new Array(item.value)
					}
				})
			// 数据转化
			this.bumens.forEach(b_item=>{
				this.bumenArr.forEach(item=>{
					if (item.children) {
						item.children.forEach(c_item=>{
							if (c_item.name == b_item.value[0]) {
								b_item.value = [item.name,c_item.name]  //bumens.value
							}
						})
					}
				})
			})

		},
		load_data(){
			var self = this;
			var postdata = {};
			
			Whttp.load('User/Bumen/get_all',postdata,function(result){
				self.bumenArr = result;
				
				var arr = [];
				
				arr.push({value:'',label:'不选择'});
				var children = self.get_child(result);
				for(var i=0;i<children.length;i++){
					arr.push(children[i]);
				}
				
				self.list = arr;
			});
		},
		add(){
			this.bumens.push({value:[''],scale:0});
		},
		del(index){
			if(this.bumens.length<=1){
				alert('不能删除了');
				return;
			}
			this.bumens.splice(index,1);
		},
		get_child(ls_list){
			var self = this;
			var childrens = [];
			if(typeof(ls_list)!='object'){
				return childrens;
			}
			
			for(var j=0;j<ls_list.length;j++){
			
				var data = {
					value: ls_list[j][self.field],
					label: ls_list[j].name
				};
				if(typeof(ls_list[j].children)=='object'){
					data['children'] = this.get_child(ls_list[j].children);
				}
				childrens.push(data);
			}
			
			return childrens;
		}
	}
}
</script>
<style scoped>
.box{position:relative;}
.act_box{
	position: relative;
}
.act_box a{color: #333;}
</style>